<template>
	<view class="searchBox" :style="borderStyle">
		<image src="./static/searchIcon.png" class="icon " mode=""></image>

		<div style='width:inherit;'>
			<uni-easyinput style="padding: 0;" v-model="searchKey" primaryColor="#8E8E8E" :inputBorder="false"
				:placeholder="placeholder" @confirm='handleSearchBtn' @clear='handleSearchBtn'></uni-easyinput>
		</div>

		<div class="leftSite flex">
			<image src="./static/codeIcon.png" v-if='codeIconState' @click="handleScan" class="icon" mode=""></image>
			<div class="btn" :style='btnStyle' @click="handleSearchBtn" v-if='searchBtnShow'>
				搜索
			</div>
		</div>
	</view>
</template>

<script>
	import {
		merchantInfoByQrCode
	} from '@/api/api.js'
	export default {
		name: "searchBox",
		data() {
			return {
				searchKey: '',
			};
		},
		props: {
			codeIconState: {
				type: Boolean,
				default: true
			},
			borderStyle: {
				type: Object,
				default: () => {}
			},
			searchBtnShow: {
				type: Boolean,
				default: true
			},
			btnStyle: {
				type: Object,
				default: () => {}
			},
			icon: {
				type: String,
				default: ''
			},
			placeholder: {
				type: String,
				default: "请输入商品标题"
			}
		},
		onLoad() {

		},
		methods: {
			input() {
				console.log('input')
			},
			handleScan() {
				console.log('handleScan')
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);

						merchantInfoByQrCode({
							merchantNo: res.result
						}).then(res => {
							console.log('描商户二维码', res.data)
						})
					}
				});

				// uni.showToast({
				// 	title: '除app外暂不支持扫码',
				// 	duration: 2000
				// });

			},
			handleSearchBtn() {
				this.$emit('search', this.searchKey)
			}
		}
	}
</script>

<style lang="less" scoped>
	.searchBox {
		width: 100%;

		height: 80rpx;
		border-radius: 40rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		position: relative;
		padding-left: 30rpx;
		box-sizing: border-box;

		.inputBox {
			width: 69%;
			height: 100%;
		}

		.leftSite {
			position: absolute;
			right: 8rpx;
			top: 50%;
			bottom: 50%;
			transform: translateY(-50%);
			align-items: center;
		}

		.btn {
			width: max-content;
			height: 64rpx;
			padding: 12rpx 24rpx;
			background: #1F1F1F;
			border-radius: 32rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
			box-sizing: border-box;
			margin-left: 20rpx;

		}
	}

	/deep/.uni-input-input {
		font-size: 30rpx;

	}

	.uni-easyinput__placeholder-class {
		font-size: 30rpx;
	}

	/deep/.uni-easyinput__content {
		background: transparent !important;
	}
</style>